<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      div {
        width: 200px;
        height: 200px;
      }
      #p {
        background-color: pink;
      }
      .red.red1.red2.red3.red4.red5.red6.red7.red8.red9.red10.red11 {
        background-color: red;
      }
      div.red {
        background-color: green;
      }
      .red {
        background-color: blue;
      }
      div.inner {
        background-color: red;
      }
      .outer > div {
        background-color: blue;
      }
      .outer div {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <!-- <div id="p" class="red red1 red2 red3 red4 red5 red6 red7 red8 red9 red10 red11">pink</div>
    <div class="red red1 red2 red3 red4 red5 red6 red7 red8 red9 red10 red11">red</div>
    <div class="red">green</div> -->

    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>
